<script setup lang="ts">
	import { Lock, User } from "@element-plus/icons-vue";
	const fs = require("fs");
	const jsyaml = require("js-yaml");
	const { ipcRenderer } = require('electron');
	// const { ipcRenderer } = window.require("electron");

	import { ref, reactive, onMounted, onUnmounted } from "vue";

	import "codemirror/mode/javascript/javascript.js";
	import Codemirror from "codemirror-editor-vue3";
	import "codemirror/theme/ayu-mirage.css";
	import "codemirror/theme/neo.css";
	// "js-yaml": "^3.1.0",
	// const { exec, spawn, execFile } = require("child_process");
	const { spawn, exec } = require("child_process");
	const path = require("path");
	// import { SCRIPT_CLIENT, SCRIPT_DETECT, SCRIPT_PYTHON } from "../../py/cont";


	let logs = ref("");

	const props = {
		value: "id",
		label: "label",
		children: "children",
	};
	let doc = ref("");
	const sdata = ref(new Array<any>());
	try {
		console.log(jsyaml); // 输出 JavaScript 对象
		// doc = jsyaml.safeLoad(fs.readFileSync("./src/assets/rules.yaml", "utf8"));
		doc = jsyaml.load(fs.readFileSync("./src/assets/rules.yaml", "utf8"));
		console.log(doc); // 输出 JavaScript 对象
		// doc = jsyaml.dump(doc);

		// sdata.value = jiegou1(doc);
	} catch (e) {
		console.error(e);
		doc.value = e.mark.buffer;
	}
	function jiegou1(obj) {
		const arr = [];
		for (let key in obj) {
			let str = [];
			if (typeof obj[key] === "object") {
				str = jiegou1(obj[key]); // 递归遍历嵌套对象
			} else {
				str.push({
					id: obj[key],
					label: obj[key],
					children: [],
				});
			}
			arr.push({
				id: key,
				label: key,
				children: str,
			});
		}

		return arr;
	}

	const code = doc;

	const cmRef = ref();
	const cmOptions = reactive({
		mode: "text/javascript",
		lineNumbers: true, // Show line number
		smartIndent: true, // Smart indent
		indentUnit: 4, // The smart indent unit is 2 spaces in length
		foldGutter: true, // Code folding
		matchBrackets: true,
		autoCloseBrackets: true,
		styleActiveLine: true, // Display the style of the selected row
		readOnly: false,
		// theme:'ayu-mirage',
		// theme:'neo',
	});
	const onChange = (val, cm) => {
		console.log(val);
		console.log(cm.getValue());
	};

	const onInput = (val) => {
		// console.log(val);
	};

	const onReady = (cm) => {
		console.log(cm.focus());

	};
	onMounted(() => {
		setTimeout(() => {
			cmRef.value?.refresh();
		}, 1000);

		setTimeout(() => {
			// cmRef.value?.resize(300, 200)
		}, 2000);

		setTimeout(() => {
			cmRef.value?.cminstance.isClean();
		}, 3000);
		console.log('ipcRenderer', ipcRenderer)
		// try {
		// 	ipcRenderer.on('log-loaded', (event, logData) => {
		// 		console.log('logData-----',logData); // 输出 JavaScript 对象
		// 		logs.value = logData;
		// 	})
		// } catch (error) {
		// 	console.error('error-----',error); // 输出 JavaScript 对象
		// }

	});

	onUnmounted(() => {
		// cmRef.value?.destroy();
	});

	function zhixing() {
		// execScripts(SCRIPT_DETECT);
		// execScripts(SCRIPT_CLIENT);
	}

	function execScripts(scriptPath) {
		// const tag = scriptPath.split("\\").pop();
		const tag = scriptPath;


		const process = spawn("cmd");
		// 执行python程序
		process.stdin.write(`python ${tag}\n`);
		// 接收子进程标准输出
		process.stdout.on("data", function (data) {
			console.log(data.toString());
			// console.log(JSON.stringify(data));
		});
	}
	function save() {
		fs.writeFile("./src/assets/rules.yaml", doc.value, "utf8", function (err) {
			if (err) {
				console.error(err);
				return;
			}
			console.log("保存成功.");
			// ipcRenderer.send('message-from-vue', { data: doc.value })
		});


	}
</script>

<template>
	<!-- <el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span style="font-weight: bold; color: #303133"
					>躺平生活管理平台 介绍</span
				>
			</div>
		</template>
		<div>
			<el-tree-v2
				style="max-width: 600px"
				:data="sdata"
				:props="props"
				:height="208"
			/>
		</div>
	</el-card> -->
	<div>
		<Codemirror v-model:value="code" :options="cmOptions" border ref="cmRef" height="400" width="600"
			@change="onChange" @input="onInput" @ready="onReady">
		</Codemirror>
		<el-button @click="save">保存</el-button>
		<el-button type="danger" @click="zhixing">执行</el-button>
		<div>{{ logs }}</div>
	</div>
</template>

<style scoped>
	.box-card {
		width: 950px;
	}

	:deep(.el-link__inner) {
		font-size: 18px;
		line-height: 36px;
	}

	/* 确保编辑器占据足够的空间 */
	.editor {
		height: 800px;
		width: 100%;
	}

</style>
